<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/xterm/css/xterm.css" />
    <script type="text/javascript" src="https://unpkg.com/xterm/lib/xterm.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.socket.io/4.7.5/socket.io.esm.min.js"></script>
</head>

<body>
    <div id="terminal" style="width:100%;"></div>
    <script type="module" charset="UTF-8">
        import {io} from "https://cdn.socket.io/4.7.5/socket.io.esm.min.js"
        $(document).ready(function() {
            const timestamp = Date.now();
            const namespace = '/Shell';
            const socket = io.connect("http://" + document.domain + ":" + location.port + namespace);
            const window_width = $(window).width();
            const window_height = $(window).height();
            const term = new Terminal({
                useStyle: true,
                convertEol: true,
                cursorBlink: true,
                rendererType: "canvas",
            });

            term.open(document.getElementById('terminal'));
            socket.emit("message",{"command": '',"id":timestamp});
            let input_command = '';
            term.onKey((e) => {
                let code = e["key"].charCodeAt(0);
                if(code == 13) {
                    term.write("\r\n");
                    socket.emit("message",{"command": input_command,"id":timestamp});
                    input_command ='';
                } else if(code == 127) {
                    term.write("\b");
                } else {
                    input_command += e["key"]
                    term.write(e["key"]);
                }
            });
            socket.on('response', function(recv) {
                term.write(recv.value+"\r\n");
            });
        });
    </script>
</body>
</html>
